<template>
  <div class="banner-container">
    <transition name="fade" mode="out-in">
      <img class="banner" :src="'http://localhost:8000'+img[index].ad_value" alt="">
    </transition>
  </div>
</template>
<style lang="less">
  @import url('../style/mixin.less');
  .banner-container {
    .On-xs( {
      width: 100%;
      overflow-x: hidden;
      height: 240px;
      position: relative;
    }
    );
    .banner {
      height: 600px;
      width: 100%;
      .On-xs( {
        height: 240px;
        position: absolute;
        clip: rect(0px 100vw 100vw 0);
        overflow: hidden;
        left: 0;
      }
      )
    }
  }

</style>
<script>
  export default {
    data(){
      return{
        index: 0
      }
    },
    props: {
      img: {
        required: true
      }
    },
    watch:{
      index: function(){
        let that=this
      setTimeout(() => {
        if(that.index<that.img.length-1){
          that.index++
        }
        else{
          that.index=0
        }
        
      },  3000);
      }
    },
    mounted:function(){
      let that=this
      setTimeout(() => {
        if(that.index<that.img.length-1){
          that.index++
        }
        else{
          that.index=0
        }
        
      },  3000);
    }

  }

</script>
